<template>
	<view class="root">
		<view class="video-bg">
			<video object-fit="cover" :controls="false" loop="loop" autoplay="autoplay" muted="muted" src="https://wow.v.netease.com/2025/0108/35599dab93866a2a0ed48409898776f5.mp4" poster="https://wow.v.netease.com/2025/0108/0c66abeefe14bffbf4d4384ada593274.jpg" class="video"></video>
		</view>
		<view class="box">
			<scroll-view class="scroll" :scroll-y="true" :scroll-top="scrollTop" scroll-with-animation>
				<view class="scroll-view-item"></view>
				<view class="scroll-view-item" @click="click(0)">
					<root-btn title="我的数据" img="/static/my_info.jpg" style="margin-right: 15px;" :selected="selectedIndex == 0"/>
				</view>
				<view class="scroll-view-item" @click="click(1)">
					<root-btn title="大秘境" img="/static/dmj_bj.png" style="margin-right: 15px;" :selected="selectedIndex == 1"/>
				</view>
				<view class="scroll-view-item" @click="click(2)">
					<root-btn title="普通团本" img="/static/pt.jpg" style="margin-right: 15px;" :selected="selectedIndex == 2"/>
				</view>
				<view class="scroll-view-item" @click="click(3)">
					<root-btn title="英雄团本" img="/static/hero.jpg" style="margin-right: 15px;" :selected="selectedIndex == 3"/>
				</view>
				<view class="scroll-view-item" @click="click(4)">
					<root-btn title="史诗团本" img="/static/epic.jpg" :selected="selectedIndex == 4"/>
				</view>
				<view class="scroll-view-item"></view>
				<view class="scroll-view-item"></view>
				<view class="scroll-view-item"></view>
				<view class="scroll-view-item"></view>
			</scroll-view>
			
			<view class="selecte-box" v-if="selectedIndex == 2 || selectedIndex == 3">
				<view class="boss-c">
					<view class="boss" v-for="(b, index) in boss" @click="selectBoss(index)">
						<boss-item :selected="b.selected" :bossIcon="b.icon_big" :name="b.boss_name"/>
					</view>
				</view>
				<view class="submit-content">
					<view class="bott" style="margin-right: 15px;">
						<lf-select :v="TankNum" :range="tankRange" icon="/static/Tank_icon.png" @change="tankChange"/>
					</view>
					<view class="bott" style="margin-right: 15px;">
						<lf-select :v="HelthNum" :range="helthRange" icon="/static/Healer_icon.png" @change="helthChange"/>
					</view>
					<view class="bott" style="margin-right: 15px;">
						<lf-select :v="DpsNum" :range="dpsRange" icon="/static/DPS_icon.png" :disabled="true"/>
					</view>
					<view class="bott" style="margin-right: 15px;">
						<lf-select :v="groupType" :range="groupTypeRange" @change="groupTypeChange"/>
					</view>
					<view class="bott" @click="create">
						<btn-a w="100%" h="100%">创建</btn-a>
					</view>
				</view>
			</view>
			
			<view class="selecte-box" v-if="selectedIndex == 1">
				<view class="un-ok">
					<view class="un-txt"> ~~~~~~~ 大秘车头（指挥）招募中 ~~~~~~~ </view>
					<view class="un-txt">1.普通话标准</view>
					<view class="un-txt">2.了解本赛季所有Boss机制</view>
					<view class="un-txt">3.情绪稳定，不骂人，不喷人，有耐心</view>
					<view class="un-txt">4.入驻联系17782320419</view>
				</view>
			</view>
			
			<view class="selecte-box" v-if="selectedIndex == 4">
				<view class="un-ok">
					<view class="un-txt">暂未开放...</view>
				</view>
			</view>
			
			<view class="selecte-box" style="height: 650px;" v-if="selectedIndex == 0">
				<view class="yq_infos">
					
					<view class="tody-inv">
						<view class="t-item">
							<num-frame title="今日邀请" :num="parseInt(numInfo.jr_yq_num)" unit="人" :ok="parseInt(numInfo.jr_yq_num) >= 10"/>
						</view>
						<view class="t-item">
							<num-frame title="昨日邀请" :num="parseInt(numInfo.zr_yq_num)" unit="人" :ok="parseInt(numInfo.zr_yq_num) >= 10"/>
						</view>
						<view class="t-item">
							<num-frame title="本月邀请" :num="parseInt(numInfo.by_yq_num)" unit="人"/>
						</view>
					</view>
					
					<view class="tody-inv">
						<view class="t-item">
							<num-frame title="今日开团" :num="parseInt(numInfo.jr_kt_num)" unit="次"/>
						</view>
						<view class="t-item">
							<num-frame title="昨日开团" :num="parseInt(numInfo.zr_kt_num)" unit="次"/>
						</view>
						<view class="t-item">
							<num-frame title="本月开团" :num="parseInt(numInfo.by_kt_num)" unit="次"/>
						</view>
					</view>
					
					<view class="filter-c">
						<lf-time ref='filterTime' style="width: 245px;"/>
						<view style="margin-left: 25px;" @click="searchMyInfo">
							<btn-a w="245px" h="100%">搜索</btn-a>
						</view>
					</view>
					
					
					<scroll-view scroll-y="true" style="height: 240px;">
						<block v-for="(item, index) in myInvites">
							<invite-item :info="item" style="margin-bottom: 5px;"/>
						</block>
					</scroll-view>

				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import rootBtn from '@/components/root-btn/root-btn.vue'
	import bossItem from '@/components/boss-item/boss-item.vue'
	import lfSelect from '@/components/lf-select/lf-select.vue'
	import btnA from '@/components/btn-a/btn-a.vue'
	import lfTime from '@/components/lf-time/lf-time.vue'
	import numFrame from '@/components/num-frame/num-frame.vue'
	import inviteItem from '@/components/invite-item/invite-item.vue'
	import { api } from '@/api.js'
	
	export default {
		components: {
			rootBtn,
			bossItem,
			lfSelect,
			btnA,
			numFrame,
			lfTime,
			inviteItem
		},
		data() {
			return {
				scrollTop: 0,
				selectedIndex: 0,
				boss: [
					{selected: true, name: "安苏雷克女王"},
					{selected: true, name: "虫巢扭曲者欧维纳克斯"},
					{selected: true, name: "节点女亲王威凯扎"},
					{selected: true, name: "拉夏南"},
					{selected: true, name: "流丝之庭"},
					{selected: true, name: "嗜灭者乌格拉克斯"},
					{selected: true, name: "苏雷吉队长席克兰"},
					{selected: true, name: "血缚恐魔"}
				],
				allNum: 30,
				TankNum: 1,
				tankRange: [
					{value: 0, text: "1人" },
					{value: 1, text: "2人" },
					{value: 2, text: "3人" },
					{value: 3, text: "4人" },
					{value: 4, text: "5人" }
				],
				HelthNum: 4,
				helthRange: [
					{value: 0, text: "1人" },
					{value: 1, text: "2人" },
					{value: 2, text: "3人" },
					{value: 3, text: "4人" },
					{value: 4, text: "5人" },
					{value: 5, text: "6人" },
					{value: 6, text: "7人" },
					{value: 7, text: "8人" },
					{value: 8, text: "9人" },
					{value: 9, text: "10人" }
				],
				DpsNum: 8,
				dpsRange: [
					{ value: 0, text: "15人" },
					{ value: 1, text: "16人" },
					{ value: 2, text: "17人" },
					{ value: 3, text: "18人" },
					{ value: 4, text: "19人" },
					{ value: 5, text: "20人" },
					{ value: 6, text: "21人" },
					{ value: 7, text: "22人" },
					{ value: 8, text: "23人" },
					{ value: 9, text: "24人" },
					{ value: 10, text: "25人" },
					{ value: 11, text: "26人" },
					{ value: 12, text: "27人" },
					{ value: 3, text: "28人" },
				],
				groupType: 0,
				groupTypeRange: [
					{ value: 0, text: "服务团" },
					{ value: 1, text: "拉新团" },
				],
				baseData: null,
				myInvites: [],
				numInfo: {
					by_kt_num: 0,
					by_yq_num: 0,
					jr_kt_num: 0,
					jr_yq_num: 0,
					zr_kt_num: 0,
					zr_yq_num: 0
				}
			}
		},
		
		onLoad() {
			
			api.get({
				url: api.instance___fuben_list(),
				success: (res) => {
					console.log(res)
					this.baseData = res.data
				},
				fail: (error) => {
					console.log(error)
				}
			})
			
			api.get({
				url: api.total___auth_kaituan_total(),
				success: (res) => {
					this.numInfo = res.data
					console.log(res)
					// this.myInvites = res.data.items
				},
				fail: (error) => {
					console.log(error)
				}
			})
			
			this.searchMyInfo()
		},
		
		
		methods: {

			click(index) {
				
				if (this.baseData == null) return
				
				this.scrollTop = 185 * index - 185
				this.selectedIndex = index
				
				if (this.selectedIndex == 2 || this.selectedIndex == 3) {
					const fubenInfo = this.baseData[this.selectedIndex - 1].fuben_list[0]
					for (let s of fubenInfo.boss_list) {
						s.selected = true
					}
					this.boss = fubenInfo.boss_list
					this.TankNum = fubenInfo.need_tank_num - 1
					this.DpsNum = fubenInfo.need_dps_num - 15
					this.HelthNum = fubenInfo.need_nai_num - 1
				}
			},

			selectBoss(index) {
				this.boss[index].selected = !this.boss[index].selected
				this.$set(this.boss, index, this.boss[index])
			},
			
			groupTypeChange(e) {
				this.groupType = e
			},
			
			tankChange(e) {
				this.TankNum = e
				this.DpsNum = (30 - (e + 1 + this.HelthNum + 1)) - 15
			},
			
			helthChange(e) {
				this.HelthNum = e
				this.DpsNum = (30 - (this.TankNum + 1 + e + 1)) - 15
			},
			
			searchMyInfo() {

				let filterDate = {}
				if (this.$refs.filterTime) {
					const create_time_str = this.$refs.filterTime.time()
					if (create_time_str.length > 0) {
						filterDate.create_time_str = create_time_str
					}
				}

				api.get({
					url: api.total___auth_group_log(),
					data: filterDate,
					success: (res) => {
						this.myInvites = res.data.items
					},
					fail: (error) => {
						
					}
				})
			},
			
			create() {
				
				const fubenInfo = this.baseData[this.selectedIndex - 1].fuben_list[0]
				let postData = {
						ins_id: fubenInfo.id,
						need_tank_num: this.TankNum + 1,
						need_dps_num: this.DpsNum + 15,
						need_nai_num: this.HelthNum + 1
					}
				let index = 0
				for (let b of fubenInfo.boss_list) {
					if (b.selected) {
						postData['boss_ids[' + index++ + ']'] = b.id
					}
				}
				if (this.groupType == 0) {
					postData.group_type = 1
				} else {
					postData.group_type = 2
				}
				api.post({
					url: api.group___auth_create_tuanben_group(),
					data: postData,
					success: (res) => {
						api.setCurrent(res.data.fb_type, res.data.id)
						uni.navigateTo({
							url: '/pages/group-dungen-detail-page/group-dungen-detail-page'
						})
					},
					fail: (error, res) => {
						uni.showModal({
							content: error,
							confirmText: '读取',
							success: (e) => {
								if (e.confirm) {
									api.setCurrent(res.data.fb_type, res.data.id)
									uni.navigateTo({
										url: '/pages/group-dungen-detail-page/group-dungen-detail-page'
									})
								}
							}
						})
					}
				})
				
				
			}
		}
	}
</script>

<style scoped>
	.root{
		/* background: url("../../static/bj.jpg") no-repeat 0 0; */
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #170e09;
		background-size: cover;
		position: relative;
	}
	
	.video-bg {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 0;
	}
	
	.video {
		width: 100%;
		height: 100%;	
	}
	
	.box {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;	
		z-index: 2;
		display: flex;
	}
	
	.btns{
		margin-left: 100px;
		margin-top: 100px;
	}
	
	
	.scroll {
		width: 280px;
		height: 100%;
		margin-left: 100px;
		/* overflow: hidden; */
		
		
		-ms-overflow-style: none; /* 隐藏 IE 和 Edge 的滚动条 */
		scrollbar-width: none; /* 隐藏 Firefox 的滚动条 */
	}
	
	.scroll-view-item {
		/* height: 300rpx; */
		/* line-height: 300rpx; */
		/* text-align: center; */
		/* font-size: 36rpx; */
		height: 185px;
		/* background-color: orange; */
	}
	
	/deep/ ::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important;
		background: transparent !important;
	}

	/deep/ ::-webkit-scrollbar-thumb {
		background: transparent !important;
	}

	/deep/ ::-webkit-scrollbar-track {
		background: transparent !important;
	}
	
	.selecte-box {
		/* width: 1px;
		flex: 1; */
		height: 385px;
		width: 885px;
		min-width: 885px;
		/* height: calc(100% - 185px - (100% - 185px * 5) + -15px); */
		/* margin-right: 300px; */
		background-color: #1f1f1f;
		margin-left: 30px;
		margin-top: 185px;
		border: 1px #2f2f2f solid;
		/* backdrop-filter: blur(30px); */
		/* box-shadow: inset 0 0 30px #ffbc00; */
		/* box-sizing: border-box; */
		display: flex;
		flex-direction: column;
		/* border-radius: 10px; */
	}
	
	.boss-c {
		margin: 35px;
		display: flex;
		flex-wrap: wrap;
		/* padding-right: -15px; */
		justify-content: space-between;
		/* background-color: orange; */
		/* height: 100px; */
	}
	
	.boss {
		/* margin-right: 15px; */
		width: calc((800px - 45px) / 4);
		height: calc(((800px - 45px) / 4) / 1.8);
		margin-bottom: 15px;
	}

	.submit-content {
		margin: 0 35px 35px 35px;
		display: flex;
		align-items: center;
		width: calc(100% - 70px);
	}
	
	.bott {
		width: 1px;
		flex: 1;
		height: 100%;
	}
	
	.un-ok {
		margin: 50px;
		
		display: flex;
		flex-direction: column;
	}
	
	.un-txt {
		color: wheat;
	}
	
	.yq_infos {
		margin: 50px;
		
		display: flex;
		flex-direction: column;
	}
	
	.tody-inv {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100px;
		margin-bottom: 30px;
	}
	
	.t-item {
		height: 100%;
	}
	
	.filter-c {
		display: flex;
		margin-bottom: 15px;
		
	}
	

</style>
